<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>用户列表</span>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="id" label="#">
				</el-table-column>
				<el-table-column prop="avatar" label="头像" sortable>
					<template slot-scope='scope'>
						<img :src="scope.row.avatar" width='50' class="headImg">
					</template>
				</el-table-column>
				<el-table-column prop="username" label="账号" sortable>
				</el-table-column>
				<el-table-column prop="fullname" label="姓名" sortable>
				</el-table-column>
				<el-table-column prop="sex" label="性别" sortable>
				</el-table-column>
				<el-table-column prop="tel" label="手机" sortable>
				</el-table-column>
				<el-table-column label="角色" prop="name" sortable>
					<template slot-scope="scope">
						<el-button v-if="scope.row.role == '1'" size="mini" type="danger" plain>{{ scope.row.role_name }}</el-button>
						<el-button v-else size="mini" type="primary" plain>{{ scope.row.role_name }}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="login_time" label="上次登录" width="180" sortable>
				</el-table-column>
				<el-table-column prop="login_count" label="登录次数" sortable>
				</el-table-column>
				<el-table-column label="操作" width="120">
					<template slot-scope='scope'>
						<el-button size="mini" type="primary" icon="el-icon-edit" plain
							@click='openEditDialog(scope.row)'>
						</el-button>
						<el-button size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.id == 1"
							@click='handleRemove(scope.row.id,scope.$index)' plain>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		</el-dialog>
		<!-- 编辑用户 -->
		<el-dialog title="编辑角色" :visible.sync="editDialogVisible" @close='handleDialogClose("editForm")'>
			<el-form :model="editForm" label-width="80px" ref="editForm" :rules='rules'>
				<el-form-item label="用户名" prop='username'>
					<el-input v-model="editForm.username" disabled></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop='fullname'>
					<el-input v-model="editForm.fullname"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="editForm.sex">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="手机" prop="tel">
					<el-input v-model="editForm.tel"></el-input>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<el-select v-model="editForm.role" placeholder="请选择">
						<el-option v-for="item in roleOption" :key="item.role" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="头像" prop='avatar'>
					<single-upload :src.sync="editForm.avatar" upload-action='/api/upload/common'
						remove-action='/api/upload' :headers='header' :data="{type:'avatar'}">
					</single-upload>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { User, Upload, Auth } from '@/api/';
	import SingleUpload from '../../components/SingleUpload.vue';
	export default {
		components: {
			SingleUpload,
		},
		data() {
			return {
				header: {
					Authorization: `Bearer ${sessionStorage.token}`,
				},
				tableData: [],
				editForm: {
					id: '',
					fullname: '',
					sex: '',
					avatar: '',
					tel: '',
					email: '',
					role: '',
				},
				roleOption: [],
				addDialogVisible: false,
				editDialogVisible: false,
				rules: {
					fullname: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
				}
			}
		},
		created() {
			this.loadList();
			this.loadRoleOptions();
		},
		methods: {
			async loadList() {
				let { status, data } = await User.list();
				console.log(data);
				if (status) {
					this.tableData = data;
				}
			},
			async loadRoleOptions() {
				let { status, data } = await Auth.list();
				if (status) {
					this.roleOption = data;
				}
			},
			
			handleRemove(id, i) {
							this.$confirm('此操作将永久删除用户，是否继续', { type: 'warning' })
								.then(async () => {
									//ajax
									let { status, msg } = await User.remove({id});
						
									if (status) {
										// 跟新DOM
										this.tableData.splice(i, 1);
										this.$message.success('删除成功');
									}
								})
								.catch(() => {
									this.$message.info('取消成功')
								})
						},
			handleEdit() {
				this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let { status, msg } = await User.update({ ...this.editForm });
						if (status) {
							this.$message.success('修改成功!');
							this.editDialogVisible = false;
							this.loadList();
						} else {
							this.$message.error('修改失败!');
						}
					}

				})
			},
			handleDialogClose(form) {
				this.$refs[form].clearValidate();
			},
			openEditDialog(user) {
				this.editForm = { ...user };
				this.editDialogVisible = true;
			}
		},

	}
</script>

<style lang="less">
	.edtBtn {
		margin-right: 10px;
	}

	.headImg {
		border-radius: 50%;
	}
</style>
